<template>
  <div id="container" />
</template>

<script>
export default {
  // 钩子函数
  mounted() {
    //   页面加载完,开始异步引入高德地图
    // 创建了一个回调函数,高德地图加载完毕会调用
    window.onLoad = function() {
      // 所有关于地图的逻辑全部都要写在这个回调里面
      // 保证高德地图加载完毕
      const map = new AMap.Map('container', {
        zoom: 20, // 级别
        center: [118.351995057178, 31.281160148421044], // 中心点坐标
        viewMode: '3D' // 使用3D视图
      })

      // 创建一个 Marker 实例：
      const marker = new AMap.Marker({
        // position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        position: [113.3245904, 23.1066805], // 地理位置经纬度
        title: '弋江区', // 鼠标移上去时显示的内容
        offset: new AMap.Pixel(-100, -100), // 偏移量
        // 可以指定图标图片地址
        icon: '//vdata.amap.com/icons/b18/1/2.png' // 添加 Icon 图标 URL
        // 可以自定义标记点显示的内容,允许插入html字符串
        // content: "<h1>广州塔Content</h1>",
      })

      // 插件的添加,第一个参数为插件名,第二个为回调函数
      AMap.plugin('AMap.ToolBar', function() {
        // 异步加载插件
        var toolbar = new AMap.ToolBar()
        map.addControl(toolbar)
      })
      // 将创建的点标记添加到已有的地图实例：
      map.add(marker)
    }
    // key是申请的值
    var url =
        'https://webapi.amap.com/maps?v=1.4.15&key=96ab26883d188e04b28c7f4f858f7c8c&callback=onLoad'
    // 创建一个 script dom元素
    // doc需要补全document
    var jsapi = document.createElement('script')
    // 设定script标签属性
    jsapi.charset = 'utf-8'
    jsapi.src = url
    // 将API文件引入页面中,加载完毕以后会调用函数
    document.head.appendChild(jsapi)
  }
}
</script>

<style  scoped>
  #container {
    position:  absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

  }
</style>
